<!DOCTYPE html>
<html>
    <head>
        <title>PhotoSwipe</title>
        <meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" />
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta name="apple-mobile-web-app-capable" content="yes" />

        <!--	<link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" />-->
        <!--        <link rel="stylesheet" href="css/jquery.mobile-1.1.0-rc.1.min.css"/>-->
        <link rel="stylesheet" href="css/jquery.mobile-1.0.1.css"/>


        <!--        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>-->
        <!--        <script src="js/jquery-1.7.1.js"></script>-->
        <script type="text/javascript" src="js/jquery-1.6.4.js"></script>
        <!--        <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>-->
        <script type="text/javascript" src="js/jquery.mobile-1.0.1.js"></script>
        <!--        <script src="js/jquery.mobile-1.1.0-rc.1.js"></script>-->


        <!-- Add photoswipe capacity !-->
        <link href="assets/photoswipe/jquery-mobile.css" type="text/css" rel="stylesheet" />
        <link href="assets/photoswipe/photoswipe.css" type="text/css" rel="stylesheet" />
        <script type="text/javascript" src="assets/photoswipe/lib/klass.min.js"></script>
        <script type="text/javascript" src="assets/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>
        
        <script type="text/javascript">
		
            /*
             * IMPORTANT!!!
             * REMEMBER TO ADD  rel="external"  to your anchor tags. 
             * If you don't this will mess with how jQuery Mobile works
             */
		
            (function(window, $, PhotoSwipe){
			
                $(document).ready(function(){
				
                    $('div.gallery-page')
                    .live('pageshow', function(e){
						
                        var 
                        currentPage = $(e.target),
                        options = {},
                        photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
							
                        return true;
						
                    })
					
                    .live('pagehide', function(e){
						
                        var 
                        currentPage = $(e.target),
                        photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }
						
                        return true;
						
                    });
				
                });
		
            }(window, window.jQuery, window.Code.PhotoSwipe));
		
        </script>

    </head>
    <body>

        <div data-role="page" id="Home">

            <div data-role="header">
                <h1>PhotoSwipe</h1>
            </div>


            <div data-role="content" >	

                <p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>		

                <ul data-role="listview" data-inset="true">
                    <li><a href="ajax-gallery1.html">First Gallery</a></li> 
                    <li><a href="ajax-gallery2.html">Second Gallery</a></li> 
                </ul> 

                <p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery / jQuery mobile websites:</p>

                <ul data-role="listview" data-inset="true">
                    <li><a href="01-default.html" target="_blank">Code Computerlove</a></li> 
                </ul> 

            </div>

            <div data-role="footer">
                <h4>&copy; 2011 Code Computerlove</h4>
            </div>

        </div>

    </body>
</html>
